import React from 'react';
import './index.scss' // 样式引入
import classnames from 'classnames'
import { connect } from 'react-redux';

import { Breadcrumb } from 'antd';
import { HomeOutlined } from '@ant-design/icons';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "other1"
        }
    }
    render () {
        const { name } = this.state
        const { userInfo } = this.props
        return (
            <div className={classnames("other-container", { 'test': true })}>
                <div className="rowsc">
                    <div>
                        <Breadcrumb>
                            <Breadcrumb.Item>
                                <HomeOutlined />
                                <span>首页</span>
                            </Breadcrumb.Item>
                            <Breadcrumb.Item>{name}</Breadcrumb.Item>
                        </Breadcrumb>
                    </div>
                    {
                        userInfo.userName && <div>{userInfo.userName}</div>
                    }
                </div>
            </div>
        )
    }
}



/**
 * @description: 需要渲染什么数据
 */
function mapStateToProps (state) {
    return {
        userInfo: state.userInfo
    }
}

export default connect(mapStateToProps)(App)